<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script type="text/javascript">
 
//  vue2的数据代理原理: file:///E:/workProject/vue-basic/12_列表渲染/7.模拟一个数据监测.html

        let person = {
            name:"张三",
            age:18
        }
        let p = new Proxy(person,{
            get(target,propName){
                console.log(`查看${propName}`)
                // return target[propName]
                return Reflect.get(target,propName)
            },
            set(target,propName,value){
                console.log(`接受到${propName}的修改,修改后的值为 ${value} 可以响应式更新界面了`)
                // return target[propName]=value
                return Reflect.set(target,propName,value)
            },
            deleteProperty(target,propName){
                console.log(`删除${propName}`)
                // return delete target[propName]
                return Reflect.deleteProperty(target,propName)

            }
        })
    </script>
</body>
</html>